
<div class="content-wrapper" id="one_key_search">
    <div class="key_searchBox">
        <div class="key_searchImg"><img src="${ctx}/imgs/oneSearch.png" alt=""></div>
        <form action="">
            <div class="key_searchTop">
                <input onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')" autocomplete="off" @focus="showKeywords" type="text" id="key_searchTxt" list="searchTxt" v-model="txtval"/><input type="submit" value="搜索" id="one_keySearch" @click="MapSearch"/>
                <datalist name="" id="searchTxt">
                    <option :value="item" v-for="(item,index) in searchArr" class="optioninp">{{item}}</option>
                </datalist>
            </div>
        </form>
    </div>
</div>
<script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
<script src="${ctx}/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    var one_keysearch=new Vue({
        el:'#one_key_search',
        data:{
            txtval:'',
            searchArr:[],
        },
        methods:{
            MapSearch(){
                if (localStorage.keywords) {
                    this.searchArr=localStorage.keywords.split(",")

                }
                this.searchArr.unshift(this.txtval);
                let newSearchArr = Array.from(new Set(this.searchArr));
                this.searchArr=newSearchArr;
                localStorage.setItem("keywords",this.searchArr)
                // console.log(this.searchArr);
                if(one_keysearch.txtval == ''){
                    toastr.error("请输入搜索内容");
                    return false;
                }
                let  flag= false;
                for(var i=0;i<window.parent.searchResult.editableTabs.length;i++){
                    if(this.txtval===window.parent.searchResult.editableTabs[i].name){
                        flag=true;
                        break;
                   }
                }
                if (flag){
                    window.parent.searchResult.editableTabsValue=this.txtval;
                } else{
                    window.parent.searchResult.addTab(this.txtval)
                    window.parent.searchResult.tabtree()
                }
            },
            showKeywords(){
                if (localStorage.keywords) {
                    this.searchArr=localStorage.keywords.split(",")
                }
            }
        }
    })
    $('#key_searchTxt').on('click',function(e){
        $('#keywords').show();
        e.stopPropagation();
    })
    $('body').on('click',function(){
        $('#keywords').hide();
    })
</script>
<style>
    iframe {
        border: none;
        height: 620px;
        margin-top: -148px;
    }
    #keywords li{
        height: 28px;
        line-height: 28px;
    }
    .key_searchImg {
        margin-left: 162px;
        margin-bottom: 50px;
    }
    .key_searchBox {
        width: 600px;
        height: 40px;
        margin: 200px auto;  /*大盒子页面居中 */
        position: relative;
    }
    .key_searchTop{
        width: 605px;
        height: 40px;
    }
    #key_searchTxt {
        width: 491px;
        height: 38px;
        border: 1px solid #CCCCCC;
        font-size: 18px;
        float: left;
        padding-left: 8px;
        outline: none;  /* 去除文本框获取焦点时的默认样式 */
    }
    #key_searchTxt:focus{
        border: 1px solid #3385FF;
        width: 491px;
    }
    #one_keySearch {
        width: 100px;
        height: 38px;
        float: left;
        background-color: #3385FF;
        color: white;
        border: none;
        font-size: 16px;
    }
    #keywords {
        position: absolute;  /* ul相对父盒子定位 */
        top: 152px;
        left: 0;
        border: 1px solid #ccc;
        border-top: none;
        width: 491px;
        padding-left: 0;
        margin-top: 1px;
        display: none;  /* 把ul隐藏起来，在获得相关内容时再显示出来，这样在搜索之前，页面只有一个搜索框和按钮 */
    }
    li {
        line-height: 24px;
        font-size: 16px;
        padding-left: 8px;
    }
</style>
